/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { DictValueEnum } from "@/components/DictTag";
import { getUser } from "@/services/api/module/system/user";
import {
	DrawerForm,
	ProForm,
	ProFormDatePicker,
	ProFormInstance,
	ProFormRadio,
	ProFormSelect,
	ProFormText,
	ProFormTextArea,
	ProFormTreeSelect
} from "@ant-design/pro-components";
import { Select } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { formTitle } from "../constants";
export type UserFormData = Record<string, unknown> & Partial<API.System.UserVo>;
import { optionSelecet } from "@/services/api/module/system/post";

export type UserFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: UserFormData) => Promise<any>;
	open: boolean;
	sexOptions: DictValueEnum;
	statusOptions: DictValueEnum;
	id: number | undefined;
	depts: any;
};

const options = [
	{
		value: "86",
		label: "+86"
	},
	{
		value: "110",
		label: "+110"
	}
];
const UserForm: React.FC<UserFormProps> = props => {
	const formRef = useRef<ProFormInstance>();
	const [title, setTitle] = useState(formTitle[0]);
	const [postOptions, setPostOptions] = useState<any>([]);
	const { sexOptions, statusOptions, id, open, onCancel, onSubmit, depts } = props;
	useEffect(() => {
		formRef?.current?.resetFields();
		if (id) {
			setTitle(formTitle[1]);
			setFormValue(id);
		}
	}, [id]);

	// 表单赋值
	const setFormValue = (id: number) => {
		getUser(id).then(data => {
			const { user } = data;
			formRef?.current?.setFieldsValue(user);
			formRef?.current?.setFieldValue("postIds", data?.postIds);
			formRef?.current?.setFieldValue("roleIds", data?.roleIds);
			setPostOptions(data?.posts);
		});
	};
	// 关闭表单
	const handleCancel = () => {
		setTitle(formTitle[0]);
		onCancel();
	};
	// 提交表单
	const handleFinish = async (values: Record<string, any>) => {
		return onSubmit({ ...(values as UserFormProps), ...{ id: id } });
	};

	const disabledDate = (date: any) => {
		console.log(date);
		let enddate = new Date();
		if (date <= enddate) return false;
		return true;
	};

	return (
		<DrawerForm<UserFormData>
			title={title}
			open={open}
			autoFocusFirstInput
			formRef={formRef}
			layout="vertical"
			grid={true}
			onFinish={handleFinish}
			drawerProps={{
				destroyOnClose: true,
				onClose: () => {
					handleCancel();
				}
			}}
		>
			<ProFormText
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				name="userName"
				label="用户账号"
				placeholder="请输入用户账号"
				rules={[
					{
						required: true,
						message: "请输入用户账号"
					}
				]}
			/>
			<ProFormText
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				name="nickName"
				label="别名"
				placeholder="请输入别名"
			/>
			<ProFormText
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				name="realName"
				label="真实姓名"
				placeholder="请输入真实姓名"
				rules={[
					{
						required: true,
						message: "请输入真实姓名"
					},
					{
						type: "string",
						message: "真实姓名不得超出50个字符",
						min: 0,
						max: 50
					}
				]}
			/>
			<ProFormTreeSelect
				name="deptId"
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				label="所属部门"
				allowClear
				placeholder="请输入用户所属部门"
				rules={[
					{
						required: true,
						message: "请输入用户所属部门"
					}
				]}
				fieldProps={{
					treeData: depts,
					fieldNames: {
						label: "deptName",
						value: "id"
					}
				}}
			/>
			<ProFormText
				name="email"
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				label="用户邮箱"
				required
				placeholder="请输入用户邮箱"
				rules={[
					{
						required: false,
						message: "请输入正确的邮箱",
						pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
					},
					{
						type: "string",
						message: "邮箱不得超出50个字符",
						min: 0,
						max: 50
					},
					({ getFieldValue }) => ({
						validator(_, value) {
							console.log("value", value);
							if (value === "" || value === undefined) {
								const phonenumber = getFieldValue("phonenumber");
								if (phonenumber !== "" && phonenumber !== undefined) {
									return Promise.resolve();
								}
								return Promise.reject(new Error("手机号或邮箱二选一"));
							} else {
								return Promise.resolve();
							}
						}
					})
				]}
			/>
			<ProFormText
				name="phonenumber"
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				label="手机号码"
				fieldProps={{
					addonBefore: <Select defaultValue="+86" options={options} />
				}}
				required
				placeholder="请输入手机号码"
				rules={[
					{
						required: false,
						message: "请输入的手机号"
						// pattern: /^\d{1,}$/
					},
					({ getFieldValue }) => ({
						validator(_, value) {
							if (value === "" || value === undefined) {
								const email = getFieldValue("email");
								if (email !== "" && email !== undefined) {
									return Promise.resolve();
								}
								return Promise.reject(new Error("手机号或邮箱二选一"));
							} else {
								return Promise.resolve();
							}
						}
					})
				]}
			/>
			<ProFormSelect
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				name="postIds"
				mode="multiple"
				label="岗位"
				request={() => {
					return optionSelecet().then(data => {
						return data;
					});
				}}
				fieldProps={{
					fieldNames: {
						label: "name",
						value: "id"
					}
				}}
				placeholder="请选择岗位"
				rules={[{ required: true, message: "请选择岗位!" }]}
			/>

			<ProFormSelect
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				valueEnum={sexOptions}
				name="sex"
				label="性别"
				placeholder="请选择用户性别"
				rules={[
					{
						required: true,
						message: "请选择用户性别"
					}
				]}
			/>
			<ProFormDatePicker
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				fieldProps={{
					style: {
						width: "100%"
					}
				}}
				name="birthday"
				label="出生年月"
			/>
			<ProFormRadio.Group
				colProps={{
					xs: 24,
					md: 12,
					lg: 12,
					xl: 12
				}}
				radioType="button"
				valueEnum={statusOptions}
				name="status"
				label="状态"
				initialValue={"0"}
				placeholder="请输入帐号状态"
				rules={[
					{
						required: true,
						message: "请输入帐号状态！"
					}
				]}
			/>
			<ProFormTextArea
				colProps={{
					xs: 24,
					md: 24,
					lg: 24,
					xl: 24
				}}
				initialValue={"这个人很懒，什么也没有留下。"}
				name="signature"
				label="个性签名"
				placeholder="请输入个性签名"
			/>
			<ProFormTextArea
				name="remark"
				colProps={{
					xs: 24,
					md: 24,
					lg: 24,
					xl: 24
				}}
				label="备注"
				placeholder="请输入备注"
				rules={[
					{
						required: false,
						message: "请输入备注！"
					}
				]}
			/>
		</DrawerForm>
	);
};

export default UserForm;
